﻿<div class="text-center">
    <MRating @bind-Value="_rating" Items="_items">
        <ItemContent Context="props">
            <MButton Icon Color="@(props.IsFilled ? GenColor(props.Index) : "grey lighten-1")" Large @onexclick="props.Click">
                <MIcon>
                    @(props.IsFilled ? "mdi-star-circle" : "mdi-star-circle-outline")
                </MIcon>
            </MButton>
        </ItemContent>
    </MRating>
</div>

@code
{
    private static double _rating = 4.5;
    private string[] _colors = new string[5] { "green", "purple", "orange", "indigo", "red" };
    private List<RatingItem> _items = new List<RatingItem>
    {
        new RatingItem { Index = 1, IsFilled = true, IsHovered = true, Value = 1, Click = x => _rating = 2},
        new RatingItem { Index = 2, IsFilled = true, IsHovered = true, Value = 2, Click = x => _rating = 3},
        new RatingItem { Index = 3, IsFilled = true, IsHovered = true, Value = 3, Click = x => _rating = 4},
        new RatingItem { Index = 4, IsFilled = true, IsHovered = true, Value = 4, Click = x => _rating = 5},
        new RatingItem { Index = 5, IsFilled = true, IsHovered = true, Value = 5, Click = x => _rating = 6}
    };

    private string GenColor(int index)
    {
        return _colors[index];
    }
}